<template>
  <div>
    <el-form style="margin: 10px 0" :model="queryForm" inline>
       <el-form-item label="用户昵称" class="mll-5">
      <el-input
        v-model="queryForm.userName"
        style="width: 200px"
        placeholder="请输入昵称"
        suffix-icon="el-icon-position"
      />
      </el-form-item>
             <el-form-item label="父评论用户昵称" class="mll-5">
      <el-input
        v-model="queryForm.replyUserName"
        style="width: 200px"
        placeholder="请输入昵称"
        suffix-icon="el-icon-position"
      />
      </el-form-item>
      <el-button class="mll-5" type="primary" @click="Search"
        >搜索</el-button
      >
      <el-button type="warning" @click="reset">重置</el-button>
    </el-form>
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="评论ID" align="center" />
        <el-table-column prop="userId" label="用户ID" align="center" />
        <el-table-column prop="nickName" label="用户昵称" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column prop="content" label="内容" align="center" />
        <el-table-column prop="loveCount" label="点赞数" align="center" />
        <el-table-column prop="postId" label="帖子ID" align="center" />
        <el-table-column prop="parentId" label="父评论ID" align="center">
          <template slot-scope="scope">
            {{ scope.row.parentId || "-" }}
          </template>
        </el-table-column>

        <el-table-column
          prop="parentNickName"
          label="父评论用户"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.parentNickName || "-" }}
          </template>
        </el-table-column>

        <el-table-column prop="parentContent" label="父评论内容" align="center">
          <template slot-scope="scope">
            {{ scope.row.parentContent || "-" }}
          </template>
        </el-table-column>

        <el-table-column prop="rootCommentId" label="顶级评论ID" align="center">
          <template slot-scope="scope">
            {{ scope.row.rootCommentId || "-" }}
          </template>
        </el-table-column>

        <el-table-column
          prop="rootCommentContent"
          label="顶级评论内容"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.rootCommentContent || "-" }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="deleteComment([scope.row.id])"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="block">
        <span class="demonstration" />
        <div style="padding: 10px 0; text-align: center">
          <el-pagination
            :current-page="pageNum"
            :page-sizes="[5, 8, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      ​
    </el-card>
  </div>
</template>
  
  <script>
import { getCommentInfo } from "@/api/comment";
export default {
  data() {
    return {
      tableData: [],
      queryForm: {
        pageNo: 1,
        pageSize: 5,
        userName: "",
        replyUserName: "",
      },
      search: "",
      pageNum: 1,
      pageSize: 5,
      total: 0,
      name: "",
      form: {},
      dialogFormVisible: false,
      isEditMode: false,
    };
  },
  created() {
    this.fetchDataFromApi();
  },
  methods: {
    async Search() {
      this.queryForm.pageNo = 1;
      this.fetchDataFromApi()
    },
    async fetchDataFromApi() {
      try {
        const response = await getCommentInfo(this.queryForm);
        this.tableData = response.data.list;
        this.total = Number(response.data.total);
        this.pages = Number(response.data.pages);
      } catch (error) {
        console.error("查询失败", error);
      }
    },
    handleCurrentChange(page) {
      this.queryForm.pageNo = page;
      this.fetchDataFromApi();
    },
    reset() {
      this.queryForm.userName = "";
      this.queryForm.replyUserName = "";
      this.fetchDataFromApi();
    },
    handleSizeChange(pageSize) {
      this.queryForm.pageSize = pageSize;
      this.fetchDataFromApi();
    },
    // handleCurrentChange(pageNum) {
    //   console.log(pageNum);
    //   this.pageNum = pageNum;
    //   this.fetchDataFromApi();
    // },
    // async fetchDataFromApi() {
    //   try {
    //     const res = await getCommentInfo(this.pageNum, this.pageSize);
    //     this.total = res.data.total;
    //     this.tableData = res.data.records;
    //     console.error("this.tableData:", res);
    //   } catch (error) {
    //     console.error("Error fetching data:", error);
    //   }
    // },
    // reset() {
    //   this.name = "";
    //   this.fetchDataFromApi();
    // },
  },
};
</script>
  <style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.mll-5 {
  margin-left: 10px;
}
</style>
  